<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题目管理</title>
    <!--导入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.19.0.js"></script>

    <style>
        .address-title {
            padding: 10px 0px;
            font-size: 26px;
            color: #eabc10;
        }

        .el-row {
            margin-bottom: 10px;
        }

        #app {
            padding: 15px;
        }
    </style>
</head>

<body>
<div id="header"></div>
<main id="app">
    <el-row>
        <el-col :span="8">
            <el-page-header @back="exit" content="语音管理" title="返回"/>
        </el-col>
        <el-col :span="8"  style="height: 38px"><!--style="margin-left: -150px"-->
            <el-input placeholder="请输入用户id" style="width:180px" v-model="param.id" clearable size="small" prefix-icon="el-icon-search">
            </el-input>
            <el-button type="primary" plain size="small" icon="el-icon-search" @click="findCondition" style="height: 38px">查询</el-button>
        </el-col>
    </el-row>

    <!--表格部分-->
    <el-row>
        <el-col :span="24">

            <el-table :data="pageBean.items" max-height="95%" style="width: 100%" border v-for="">

                <el-table-column
                        label="序号" type="index" width="60" :index="indexMethod">
                </el-table-column>
                <el-table-column
                        prop="name" min-width="30"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="time" min-width="40"
                        label="听取语音次数">
                </el-table-column>
                <el-table-column
                        prop="count"  min-width="40"
                        label="现有语音条数">
                </el-table-column>
                <el-table-column
                        prop="updated" min-width="40"
                        label="更新时间">
                </el-table-column>
                <el-table-column prop="isdefault" label="选择是否为会员">
                    <template slot-scope="scope">
                        <el-switch
                                :value="scope.row.isdefault==1" @change="changeDefaultAddress(scope.row)"
                                active-text="是"
                                inactive-text="否">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                                size="mini" icon="el-icon-edit" type="success" plain
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

        </el-col>
    </el-row>

    <!-- 分页部分 -->
    <el-row>
        <el-col :span="24">
            <el-row>
                <el-col :span="24">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[3,5,10]"
                            :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageBean.total">
                    </el-pagination>
                </el-col>
            </el-row>

        </el-col>
    </el-row>

<!--    新增和修改对话框
    close-on-click-modal:是否可以通过点击 modal 关闭 Dialog-->
    <el-dialog title="选项信息" :visible.sync="dialogFormVisible" width="45%" @close="cancel" :close-on-click-modal="false">
        <!-- status-icon 为输入框添加了表示校验结果的反馈图标-->
        <el-form :model="form" :rules="rules" label-width="100px" size="small" ref="addressForm" status-icon>
            <!-- prop属性用于表单验证 -->
            <el-form-item label="听取语音次数" prop="time">
                <el-input v-model="form.time" autocomplete="off" placeholder="听取语音次数" prefix-icon="el-icon-location" style="width:90%"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" icon="el-icon-ice-cream-round">取 消</el-button>
            <el-button type="primary" @click="save" icon="el-icon-milk-tea">确 定</el-button>
        </div>
    </el-dialog>
</main>
<div id="footer"></div>
</body>


</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            value:'',
            valuequestion:'',
            dialogFormVisible: false,  //对话框不可见
            //表单
            form: {
                time: '',
            },
            //查询参数
            param: {
                id:'',
                current: 1,
                size: 5,
            },
            //页面对象
            pageBean: {},
            //校验规则
            rules: {
                time: [
                    {required: true, message: '数字不能为空', trigger: 'blur'},
                ]
            }
        },
        methods: {
            //条件查询
            findCondition(){
                this.param.current=1;
                axios.post("/sound/getsoundtime1", this.param).then(rsp=>{
                    this.pageBean=rsp.data
                })
            },
            //查询所有地址
            findAddress() {
                axios.post("/sound/getsoundtime1",this.param).then(rsp=>{
                    this.pageBean=rsp.data
                })
            },

            //第一列的行号
            indexMethod(index) {
                return (this.param.current-1)*this.param.size+index+1;
            },
            //改变页面大小
            handleSizeChange(val) {
                this.param.size=val;
                this.findAddress();
            },
            //改变当前页
            handleCurrentChange(val) {
                /*  axios.post("/address/getall","size="+this.param.size+"&current="+val).then(rsp=>{
                      this.pageBean=rsp.data
                  })*/
                this.param.current=val;
                this.findAddress();
            },
            //对话框的取消按钮
            cancel() {
                this.dialogFormVisible=false
                this.form.address='';
                this.form.contact='';
                this.form.telephone='';

            },
            //显示对象框
            showDialog() {
                this.dialogFormVisible=true;
            },
            //编辑按钮
            handleEdit(index, row) {
                //打开编辑窗口
                this.dialogFormVisible = true;
                //复制row的对象到form对象，即复制所有的属性值
                Object.assign(this.form, row);
                //直接赋值会导致修改的同时表格中显示的数据也发生变化
            },
            //确定按钮
            save() {
                // 为表单绑定验证功能
                this.$refs["addressForm"].validate((valid) => {
                    if (valid) {
                        if(this.form.id){
                            axios.post("/sound/updateTime",this.form).then(rsp=>{
                                this.form.time='';
                                this.form.id=null;
                                window.location.reload();
                            })

                        }
                    } else {
                        return false;
                    }

                });

            },

            //设置为默认地址
            changeDefaultAddress(row) {
                /*     if(row.isdefault==1){*/
                axios.post("/sound/updateAd","id="+row.id).then(
                    rsp=>{
                        this.findAddress()
                    }
                )
                /*        }else {
                            axios.post("/address/update","aid="+row.aid+"&isdefault="+1).then(
                                rsp=>{
                                    this.findAddress()
                                }
                            )
                        }*/

            },
            //退出
            exit() {
                /*   axios.post("/address/exit").then(
                       rsp=>{
                       if(rsp.status==200){
                       alert("退出成功")
                       location.replace("/login.html")
                       }
                       }
                   )*/

                location.href='/index.html';
            }
        },
        mounted() {
            //页面加载就读取所有地址数据
            this.findAddress();

        }
    });

</script>
</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

